<template>
  <div>
    <h1 v-red>h1</h1>
    <h2>h2</h2>
    <h3 v-color="'orange'">h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  // 使用 directives 定义自定义指令
  directives: {
    red(el) {
      el.style.color = 'red'
    },
    // 自定义指令允许传值,传入的值存放在指令的详细信息中
    // 定义指令时的第一个参数就是绑定该指令的真实节点,第二个值就是指令的详细信息
    color(el, msg) {
      el.style.color = msg.value
    },
  },
}
</script>

<style></style>
